import React, { useState, useEffect } from "react";
import { Form, Select, Input, TimePicker, Radio, Row, Col } from 'antd';
const { Option } = Select;

import DetailDes from './DetailDesView';
import AddScene from './AddScene';
import AddShop from './AddShop';

function TravelContView({ prop, onChange }) {
    console.log('c>>render====')
    const hotelLevel = [{ label: '客栈' }, { label: '经济连锁' }, { label: '二星及以下' }, { label: '三星舒适' }, { label: '四星高档' }, { label: '五星豪华' }];

    let getDetail = (v) => {
        let { hasDetailDesc, detailDesc, imgs: { imgOne, imgTwo, imgThree, imgFour } } = v;
        onChange();
    };
    let getScene = (v) => {

    };
    let getShop = (v) => {

    };
    switch(prop.trip_type) {
        case 1:
            return (
                <div>
                    <Form.Item
                        label="入住城市"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.hotel_in_city} onChange={(v) => onChange('hotel_in_city', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="酒店名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.hotel_name} onChange={(v) => onChange('hotel_name', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="酒店星级"
                        labelCol={{ span: 4 }}
                    >
                        <Select
                            allowClear={true}
                            style={{ width: 200 }}
                            placeholder="请选择"
                            value={prop.hotel_level}
                            onChange={(v) => onChange('hotel_level', v)}
                        >
                            {
                                hotelLevel.map((item, i) => (<Option key={i} value={++i}>{item.label}</Option>))
                            }
                        </Select>
                    </Form.Item>
                    <DetailDes onChange={getDetail}/>
                </div>
            );
            break;
        case 2:
            return (
                <div>
                    <Form.Item
                        label="景点名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.scenic_name} onChange={(v) => onChange('scenic_name', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.scenic_active_time} onChange={(v) => onChange('scenic_active_time', v)} />
                    </Form.Item>
                    <DetailDes prop={prop} onChange={onChange}/>
                    <AddScene onChange={getScene} />
                </div>
            );
            break;
        case 3:
            return (
                <div>
                    <Form.Item
                        label="餐饮类型"
                        labelCol={{ span: 4 }}
                    >
                        <Radio.Group onChange={(v) => {onChange('dining_type', v.target.value)}} value={prop.dining_type}>
                            <Radio value={0}>早餐</Radio>
                            <Radio value={1}>中餐</Radio>
                            <Radio value={2}>晚餐</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="是否包含"
                        labelCol={{ span: 4 }}
                    >
                        <Radio.Group onChange={(v) => {onChange('dining_is_contain', v.target.value)}} value={prop.dining_is_contain}>
                            <Radio value={0}>含</Radio>
                            <Radio value={1}>不含</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="特殊说明"
                        labelCol={{ span: 4 }}
                    >
                        <Input.TextArea rows={4} onChange={(v) => {onChange('dining_special_instruction', v.target.value)}} value={prop.dining_special_instruction}/>
                    </Form.Item>
                    <DetailDes onChange={getDetail}/>
                </div>
            );
            break;
        case 4:
            return (
                <div>
                    <Form.Item
                        label="购物点名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.shopping_title} onChange={(v) => onChange('shopping_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.shopping_active_time} onChange={(v) => onChange('shopping_active_time', v)} />
                    </Form.Item>
                    <DetailDes onChange={getDetail}/>
                    <AddShop onChange={getShop} />
                </div>
            );
            break;
        case 5:
            return (
                <div>
                    <Form.Item
                        label="活动名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.free_active_title} onChange={(v) => onChange('free_active_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.free_active_time} onChange={(v) => onChange('free_active_time', v)} />
                    </Form.Item>
                    <DetailDes onChange={getDetail}/>
                </div>
            );
            break;
        case 6:
            return (
                <div>
                    <Form.Item
                        label="名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.own_title} onChange={(v) => onChange('own_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.own_active_time} onChange={(v) => onChange('own_active_time', v)} />
                    </Form.Item>
                    <DetailDes onChange={getDetail}/>
                </div>
            );
            break;
        case 7:
            return (
                <div>
                    <Form.Item
                        label="名称"
                        labelCol={{ span: 4 }}
                    >
                        <Input value={prop.other_title} onChange={(v) => onChange('other_title', v.target.value)} />
                    </Form.Item>
                    <Form.Item
                        label="活动时间"
                        labelCol={{ span: 4 }}
                    >
                        <TimePicker format={'HH:mm'} value={prop.other_active_time} onChange={(v) => onChange('other_active_time', v)} />
                    </Form.Item>
                    <DetailDes onChange={getDetail}/>
                </div>
            );
            break;
        case 8:
            return (
                <div>
                    <Form.Item
                        label="简介"
                        labelCol={{ span: 4 }}
                    >
                        <Input.TextArea rows={4} onChange={(v) => {onChange('today_profile', v.target.value)}} value={prop.today_profile}/>
                    </Form.Item>
                </div>
            );
            break;
        default:
            return null;
            break;
    }
};
let TravelCont = React.memo(TravelContView, (prevProps, nextProps) => {
    /*console.log(prevProps, nextProps)
    return (prevProps.type === nextProps.type)*/
});

export default TravelCont;